<template>
  <div class="app-container">
    <div>
      <el-form
        :model="queryParams"
        ref="queryForm"
        :inline="true"
        label-width="90px"
        style="margin-left: -20px"
      >
        <el-form-item style="margin-left:20px">
          <el-button type="primary" plain @click="btnMin(1)">1小时</el-button>
          <el-button type="primary" plain @click="btnMin(3)">3小时</el-button>
          <el-button type="primary" plain @click="btnMin(8)">8小时</el-button>
        </el-form-item>
        <el-form-item label="时间" prop="time" style="margin-left: -30px">
          <el-date-picker
            v-model="queryParams.time"
            type="datetimerange"
            range-separator="至"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
            value-format="yyyy-MM-dd HH:mm:ss"
          >
          </el-date-picker>
        </el-form-item>
        <!-- <el-form-item label="分站">
          <el-select
            v-model="type"
            placeholder="请选择分站"
            size="small"
            :popper-append-to-body="false"
            style="width: 280px;"
            @change="changesub"
          >
            <el-option
              v-for="dicts in substationList"
              :key="dicts.ssStationCode"
              :label="dicts.ssStationName"
              :value="dicts.ssStationCode"
            />
          </el-select>
        </el-form-item> -->
        <el-form-item label="传感器类型">
        <!--  clearable -->
        <el-select
          v-model="queryParams.ss_transducer_code"
          placeholder="请选择传感器类型"
          size="small"
          filterable
          @clear="clearsducerCode"
          @change="changes"
          :popper-append-to-body="false"
        >
          <el-option
            v-for="dicts in typeList"
            :key="dicts.ss_transducer_code"
            :label="dicts.ss_transducer_point"
            :value="dicts.ss_transducer_code"
          />
        </el-select>
      </el-form-item>
        <el-form-item style="margin-left: 20px">
          <el-button type="primary" size="mini" @click="generateCurve"
            >生成曲线</el-button
          >
          <el-button
            icon="el-icon-refresh"
            size="mini"
            @click="resetForm('queryForm')"
            >重置</el-button
          >
        </el-form-item>
      </el-form>
    </div>
    <div class="subcontent">
      <div class="subtable" id="line_chart"></div>
      <div class="sublist">
        <p v-if="stationname">分站名称：{{ stationname }}</p>
        <div class="mnsublist">
          <div class="mnl">
            <el-divider content-position="left">模拟量列表</el-divider>
          </div>
          <ol class="mnlist">
            <li
              v-for="(item, index) in mnlist"
              :key="index"
              @click="mnlactive(item)"
              :class="{ mnactive: mnlTab.includes(item.ssTransducerCode) }"
            >
              {{ item.ssTransducerPoint }}
            </li>
          </ol>
        </div>
        <div class="kgsublist">
          <div class="kgl">
            <el-divider content-position="left">开关量列表</el-divider>
          </div>
          <ol class="kglist">
            <li
              v-for="(item, index) in kglist"
              :key="index"
              @click="kglactive(item)"
              :class="{ kgactive: kglTab.includes(item.ssTransducerCode) }"
            >
              {{ item.ssTransducerPoint }}
            </li>
          </ol>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import * as echarts from "echarts";
export default {
  data() {
    return {
      type: "",
      //分站列表
      substationList: [],
      //模拟量列表
      mnlist: [],
      mnlTab: [],
      //开关量列表
      kglist: [],
      kglTab: [],
      queryParams: {
        time: "",
        endDate: "",
        startDate: "",
        ssTransducerCodeList: []
      },
      lineList: [],
      starttime: "",
      endtime: "",
      typeList:[],
      stationname:''
    };
  },
  methods: {
    clearsducerCode() {
      this.queryParams.pageNum = 1
      this.getList()
    },
    changes(e) {
      this.typeList.forEach(item =>{
        if(item.ss_transducer_code==e){
          this.changesub(item.ss_station_code)
          this.stationname = item.ss_station_name
        }
      })
    },
    getType() {
      this.$http.get("/navigation/allTransducerList").then(response => {
        console.log(218, response)
        if (response.code === 200) {
          this.typeList = response.data
        }
      })
    },
    resetForm(form) {
      if (this.$refs[form] !== undefined) {
        this.$refs[form].resetFields();
      }
      this.type = "";
      this.mnlist = [];
      this.kglist = [];
      this.queryParams.ssTransducerCodeList = [];
      let myChart = echarts.init(document.getElementById("line_chart"));
      myChart.clear();
    },
    getsubstationList() {
      this.$http.get("navigation/stationList").then(res => {
        if (res.code == 200) {
          this.substationList = res.data;
        }
      });
    },
    changesub(item) {
      this.mnlTab = [];
      this.kglTab = [];
      this.$http
        .get("navigation/simulationList?stationCode=" + item)
        .then(res => {
          if (res.code == 200) {
            this.mnlist = res.data;
          }
        });
      this.$http
        .get("navigation/switchingList?stationCode=" + item)
        .then(res => {
          if (res.code == 200) {
            this.kglist = res.data;
          }
        });
    },
    mnlactive(item) {
      let code = item.ssTransducerCode;
      if (this.mnlTab.includes(code)) {
        this.mnlTab = this.mnlTab.filter(function(ele) {
          return ele != code;
        });
      } else {
        this.mnlTab.push(code);
      }
    },
    kglactive(item) {
      let code = item.ssTransducerCode;
      if (this.kglTab.includes(code)) {
        this.kglTab = this.kglTab.filter(function(ele) {
          return ele != code;
        });
      } else {
        this.kglTab.push(code);
      }
    },
    generateCurve() {
      this.lineList = [];
      let myChart = echarts.init(document.getElementById("line_chart"));
      myChart.clear();
      this.queryParams.ssTransducerCodeList = this.mnlTab.concat(this.kglTab);
      this.queryParams.endDate = this.queryParams.time[1];
      this.queryParams.startDate = this.queryParams.time[0];
      this.$http
        .get(
          "navigation/ssNewHistory?ssTransducerCodeList=" +
            this.queryParams.ssTransducerCodeList +
            "&startDate=" +
            this.queryParams.startDate +
            "&endDate=" +
            this.queryParams.endDate
        )
        .then(res => {
          if (res.code == 200) {
            this.lineList = res.data;
            var line_chart = echarts.init(
              document.getElementById("line_chart")
            );
            var option = {
              tooltip: {
                trigger: "axis",
                axisPointer: {
                  label: {
                    show: true,
                    backgroundColor: "#fff",
                    color: "#556677",
                    borderColor: "rgba(0,0,0,0)",
                    shadowColor: "rgba(0,0,0,0)",
                    shadowOffsetY: 0
                  },
                  lineStyle: {
                    width: 0
                  }
                },
                backgroundColor: "#fff",
                textStyle: {
                  color: "#5c6c7c"
                },
                padding: [10, 10],
                extraCssText: "box-shadow: 1px 0 2px 0 rgba(163,163,163,0.5)"
              },
              toolbox: {
                show: true,
                feature: {
                  mark: { show: true },
                  dataView: { show: true, readOnly: false },
                  magicType: { show: true, type: ["line", "bar"] },
                  restore: { show: true },
                  saveAsImage: { show: true }
                }
              },
              calculable: true,
              legend: {
                data: res.data.map(item => item.ssTransducerPoint)
              },
              //xAxis: [
              // {
              //   type: "time",
              //   min: startTime,
              //   max: endTime,

              // }
              //],
              xAxis: {
                // x轴样式
                type: "time",
                name: "时间",
                nameTextStyle: { fontSize: 15, color: "#666" },
                // boundaryGap: false,
                boundaryGap: [0, 0.05],
                axisLine: {
                  lineStyle: {
                    color: "#666"
                  }
                },
                axisTick: {
                  show: true
                },
                splitLine: {
                  show: false,
                  //  改变轴线颜色
                  lineStyle: {
                    color: "#666"
                  }
                }
              },
              yAxis: [
                {
                  type: "value",
                  name: "模拟量",
                  axisLabel: {
                    formatter: "{value}"
                  }
                },
                {
                  type: "value",
                  name: "开关量",
                  axisLabel: {
                    formatter: "{value}"
                  }
                }
              ],
              //区域缩放
              dataZoom: [
                {
                  type: "slider",
                  filterMode: "weakFilter",
                  showDataShadow: false,
                  bottom: 5,
                  height: 10,
                  borderColor: "transparent",
                  backgroundColor: "#e2e2e2",
                  handleIcon:
                    "M10.7,11.9H9.3c-4.9,0.3-8.8,4.4-8.8,9.4c0,5,3.9,9.1,8.8,9.4h1.3c4.9-0.3,8.8-4.4,8.8-9.4C19.5,16.3,15.6,12.2,10.7,11.9z M13.3,24.4H6.7v-1.2h6.6z M13.3,22H6.7v-1.2h6.6z M13.3,19.6H6.7v-1.2h6.6z", // jshint ignore:line
                  handleSize: 20,
                  handleStyle: {
                    shadowBlur: 6,
                    shadowOffsetX: 1,
                    shadowOffsetY: 2,
                    shadowColor: "#aaa"
                  },
                  labelFormatter: ""
                },
                {
                  type: "inside",
                  filterMode: "weakFilter"
                }
              ],
              series: []
            };
            var arr = [];
            var temp = null;
            this.lineList.forEach(item => {
              this.$set(item, "data", []);
              arr = [];
              item.data.push([item.time, item.value, item.ssTransducerPoint]);
              for (var i = 0; i < item.data[0][0].length; i++) {
                arr.push([item.data[0][0][i], item.data[0][1][i]]);
              }
              temp = {
                name: item.ssTransducerPoint,
                type: "line",
                data: arr,
                step: "start"
              };
              option.series.push(temp);
            });
            line_chart.setOption(option);
          }
        });
    },
    btnMin(type) {
      this.queryParams.time = [];
      if (type == 1) {
        this.starttime = this.getYMDHMS(
          new Date(this.getTimeNow()).getTime() - 3600000
        );
      } else if (type == 3) {
        this.starttime = this.getYMDHMS(
          new Date(this.getTimeNow()).getTime() - 10800000
        );
      } else if (type == 8) {
        this.starttime = this.getYMDHMS(
          new Date(this.getTimeNow()).getTime() - 28800000
        );
      }
      this.queryParams.time.push(this.starttime, this.getTimeNow());
      if (
        this.queryParams.inOutType &&
        this.queryParams.time.length == 2 &&
        this.queryParams.sensorName.length > 0
      ) {
        this.getsubstationList();
      }
    },
    getYMDHMS(timestamp) {
      const time = new Date(timestamp);
      const year = time.getFullYear();
      let month = time.getMonth() + 1;
      let date = time.getDate();
      let hours = time.getHours();
      let minute = time.getMinutes();
      let second = time.getSeconds();

      if (month < 10) {
        month = "0" + month;
      }
      if (date < 10) {
        date = "0" + date;
      }
      if (hours < 10) {
        hours = "0" + hours;
      }
      if (minute < 10) {
        minute = "0" + minute;
      }
      if (second < 10) {
        second = "0" + second;
      }
      return (
        year +
        "-" +
        month +
        "-" +
        date +
        " " +
        hours +
        ":" +
        minute +
        ":" +
        second
      );
    },
    getTimeNow() {
      const date = new Date(); //   Wed Aug 26 2020 11:14:44 GMT+0800 (中国标准时间)
      const year = date.getFullYear(); // 2020
      let month = date.getMonth() + 1; // 8
      let day = date.getDate(); // 26
      let h = date.getHours(); // 11
      let m = date.getMinutes(); // 14
      let s = date.getSeconds(); // 44
      if (month < 10) {
        month = "0" + month;
      }
      if (day < 10) {
        day = "0" + day;
      }
      if (h < 10) {
        h = "0" + h;
      }
      if (m < 10) {
        m = "0" + m;
      }
      if (s < 10) {
        s = "0" + s;
      }
      return year + "-" + month + "-" + day + " " + h + ":" + m + ":" + s; // 返回时间格式
    }
  },
  created() {
    this.getsubstationList();
    this.getType()
  }
};
</script>

<style lang="scss" scoped>
.subcontent {
  width: 100%;
  height: calc(100vh - 200px);
  display: flex;
  .subtable {
    flex: 1;
    height: 100%;
    padding-right: 15px;
    border-right: 1px solid #ccc;
  }
  .sublist {
    width: 400px;
    height: 100%;
    display: flex;
    flex-direction: column;
    .mnsublist {
      flex: 1;
      width: 100%;
      border-bottom: 1px solid #ccc;
      display: flex;
      flex-direction: column;
      .mnl {
        height: 50px;
        width: 100%;
      }
      .mnlist {
        flex: 1;
        width: 100%;
        overflow: auto;
        li {
          height: 40px;
          line-height: 40px;
          box-sizing: border-box;
          padding: 0 10px;
          overflow: hidden;
          white-space: nowrap;
          text-overflow: ellipsis;
          width: 100%;
          letter-spacing: 2px;
          font-size: 14px;
          cursor: pointer;
        }
        li:not(:last-child) {
          border-bottom: 1px solid #ccc;
        }
        .mnactive {
          background: rgb(36, 176, 241);
          color: #fff;
        }
      }
    }
    .kgsublist {
      flex: 1;
      width: 100%;
      display: flex;
      flex-direction: column;
      .kgl {
        height: 50px;
        width: 100%;
      }
      .kglist {
        flex: 1;
        width: 100%;
        overflow: auto;
        li {
          height: 40px;
          line-height: 40px;
          box-sizing: border-box;
          padding: 0 10px;
          overflow: hidden;
          white-space: nowrap;
          text-overflow: ellipsis;
          width: 100%;
          letter-spacing: 2px;
          font-size: 14px;
          cursor: pointer;
        }
        li:not(:last-child) {
          border-bottom: 1px solid #ccc;
        }
        .kgactive {
          background: rgb(36, 176, 241);
          color: #fff;
        }
      }
    }
  }
}
</style>
